<div class="fullscreen" nz-row>
    <div class="outer-panel" nz-col nzSpan="6">
        <div class="inner-panel">
            <sys-config-tree-panel
                (selectNode)="selectNode($event)"
                [draggable]="true"
                [searchConfig]="searchConfig"
                [showRoot]="true"
                [showSearch]="true"
            >
            </sys-config-tree-panel>
        </div>
    </div>
    <div class="outer-panel" nz-col nzSpan="18">
        <div class="inner-panel">
            <div style="height: 45px">
                <nz-tabset (nzSelectChange)="nzSelectChange($event)" [(nzSelectedIndex)]="tabIndex">
                    <nz-tab *ngIf="showPageTab" nzTitle="页面">
                    </nz-tab>
                    <nz-tab *ngIf="showCategoryTab" nzTitle="分项">
                    </nz-tab>
                    <nz-tab *ngIf="showConfigTab" nzTitle="分类 / 配置项">
                    </nz-tab>
                    <nz-tab *ngIf="showDetailTab" nzTitle="详情">
                    </nz-tab>
                    <nz-tab *ngIf="showSchemaTab" nzTitle="查看Schema">
                    </nz-tab>
                </nz-tabset>
            </div>
            <div style="height: calc(100% - 45px);  overflow: auto;">
                <ng-container *ngIf="showGrid">
                    <base-grid
                        (dataReload)="onDataReload()"
                        (itemClick)="itemClick($event)"
                        [baseParam]="baseParam"
                        [beforeRemove]="beforeRemove.bind(this)"
                        [columns]="columns"
                        [customListItem]="customListItem"
                        [keyField]="'id'"
                        [nameField]="'name'"
                        [name]="'配置管理'"
                        [popupWidth]="'650px'"
                        [recordWrapper]="recordWrapper.bind(this)"
                        [schema]="schema"
                        [searchForm]="searchForm"
                        [showSort]="true"
                        [showTableListChange]="true"
                        [showType]="'list'"
                        [showModify]="false"
                        [showOperateModify]="false"
                        [usePage]="false">
                        <ng-template #customListItem let-item>
                        <span>
                            <div *ngIf="item.iconId">
                                 <img *ngIf="item.iconData.indexOf('base64') >= 0 " [src]="item.iconData"
                                      alt="img" class="menu-img">
                                 <div *ngIf="item.iconData.indexOf('svg') >= 0 " [innerHTML]="getSvgHtml(item.iconData)"
                                      class="show-point-svg"></div>
                            </div>
                            <i
                                *ngIf="! item.iconId"
                                [nzType]="item.type === 'APPLICATION' ? 'dr:hy-application' : item.type === 'MODULE' ? 'dr:hy-module' : 'dr:hy-menu'"
                                nz-icon
                                theme="fill">
                            </i>
                        </span>
                            <div class="i-text">{{item.name}}</div>
                        </ng-template>
                    </base-grid>
                </ng-container>
                <ng-container *ngIf="showDetail && activateTreeNode">
                    <div class="detail">
                        <base-detail
                            (eventClose)="detailClose($event)"
                            [baseParam]="baseParam"
                            [detailPanelType]="'modify'"
                            [name]="'配置'"
                            [recordWrapper]="recordWrapper.bind(this)"
                            [record]="activateTreeNode?.data"
                            [schema]="schema"
                            [showButton]="true"
                            [usePopup]="false"
                        >
                        </base-detail>
                    </div>
                </ng-container>
                <ng-container *ngIf="showSchema">
                    <div class="cccc">
                        <div style="padding: 5px;">
                            <button nz-button nzType="primary" (click)="generateSchema()">重新加载Schema</button>
                            　　
                            <button (nzOnConfirm)="uploadSchema()"
                                    [nzType]="'primary'"
                                    nz-button
                                    nz-popconfirm
                                    nzCancelText="取消" nzOkText="确认"
                                    nzTitle="更新">更新Schema
                            </button>
                        </div>
                        <div nz-row>
                            <div nz-col [nzSpan]="12">
                                <textarea [ngModel]="schemaText" readonly disabled
                                          style="width: 100%; height: calc(100% - 60px); min-height: 500px"></textarea>
                            </div>
                            <div nz-col [nzSpan]="12">
                                <sys-config-page [code]="activateTreeNode.title"></sys-config-page>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>
    </div>
</div>
